<template>
  <div class="wrap">
    <img
      src="@/assets/dele/shopBg.png"
      alt=""
      class="shopBg"
      v-if="!resShopInfo.backgroundImg"
      @click="look('@/assets/dele/shopBg.png')"
    />
    <img
      :src="$imgUrl + resShopInfo.backgroundImg"
      alt=""
      class="shopBg"
      v-if="resShopInfo.backgroundImg"
      @click="look($imgUrl + resShopInfo.backgroundImg)"
    />
    <div class="productList">
      <div class="productionItem">
        <div class="proIntroWrap">
          <div class="proIntroLeft">
            <img @click="look($imgUrl + resShopInfo.headImg)" :src="$imgUrl + resShopInfo.headImg" alt="" class="proPoster" />
            <!-- <img src="@/assets/vip.png" alt="" class="vipImg" /> -->
          </div>
          <div class="proIntroRight">
            <div class="proTitle">
              <div class="proLeft">
                {{ resShopInfo.shopName }}
              </div>
              <div class="proRight">{{ resShopInfo.shopDetailsAddress }}</div>
            </div>
            <div class="workTime">
              <div class="timeLeft">
                营业：{{ resShopInfo.startBusinessTime }}-{{
                  resShopInfo.endBusinessTime
                }}
              </div>
              <div class="saleRight">销量:{{ resShopInfo.totalSaleNum }}</div>
            </div>
            <div class="salePrice" v-if="resShopInfo.appCouponList.length > 0">
              <em v-for="(item_, index_) in resShopInfo.appCouponList" :key="index_">
                满{{ item_.thresholdPrice }}减{{ item_.discountsPrice }}&nbsp;&nbsp;
              </em>
              <!-- <i
                v-for="(item_, index_) in resShopInfo.appCouponList"
                :key="index_"
                v-if="index_ % 2 == 0"
              ></i> -->
            </div>
            <div class="salePrice" v-else>暂无优惠</div>
          </div>
        </div>
        <div class="proIntro">
          {{ resShopInfo.intro || "暂无简介" }}
        </div>
      </div>
      <div class="contactList">
        <div class="contactItem">
          <img src="@/assets/qq.png" alt="" />
          <em>{{ resShopInfo.qqNum || "暂无" }}</em>
        </div>
        <div class="contactItem">
          <img src="@/assets/weichat.png" alt="" />
          <em>{{ resShopInfo.wxNum || "暂无" }}</em>
        </div>
        <div class="contactItem">
          <img src="@/assets/phone.png" alt="" />
          <em>{{ resShopInfo.mobile || "暂无" }}</em>
        </div>
      </div>
      <div style="height: 10px; width: 100%"></div>
      <div class="greyLine"></div>
      <div class="bottomWrap">
        <div class="itemRelet">
          <div class="left">
            <p class="oneLine">租金有效期至：</p>
            <p class="twoLine">{{ resShopInfo.endRentTime }}</p>
          </div>
          <div class="right" @click="jumpBRelet">
            立即续租
            <img src="@/assets/rightGreyArrow.png" alt="" class="rightGreyArrow" />
          </div>
        </div>
        <div class="itemRelet">
          <div class="left">
            <p class="oneLine">日推有效期至：</p>
            <p class="twoLine">{{ resShopInfo.dayRecEndTime || "暂未开启日推" }}</p>
          </div>
          <div class="right" @click="jumpDayRecommend">
            {{ resShopInfo.dayRecEndTime ? "立即加购" : "立即购买" }}
            <img src="@/assets/rightGreyArrow.png" alt="" class="rightGreyArrow" />
          </div>
        </div>
        <div class="itemRelet itemRelet2">
          <div class="staticItem">
            <em class="originPoint"></em>
            <em class="staticText">累计收入：{{ resShopInfo.totalTransAmount }}</em>
          </div>
          <div class="staticItem staticItem2">
            <em class="originPoint"></em>
            <em class="staticText">累计销量：{{ resShopInfo.totalSaleNum }}</em>
          </div>
          <div class="staticItem">
            <em class="originPoint"></em>
            <em class="staticText">商品总数：{{ resShopInfo.goodsNum }}</em>
          </div>
          <div class="staticItem staticItem2">
            <em class="originPoint"></em>
            <em class="staticText">活动总数：{{ resShopInfo.activityNum }}</em>
          </div>
        </div>
        <div class="shopIconList">
          <div class="iconItem" @click="jumpShopInfomation">
            <img src="@/assets/shopIcon1.png" alt="" class="shopIconImg" />
            <p class="iconText">店铺资料</p>
          </div>
          <div class="iconItem" @click="jumpDsiacountCoupon">
            <img src="@/assets/shopIcon2.png" alt="" class="shopIconImg" />
            <p class="iconText">活动管理</p>
          </div>
          <div class="iconItem" @click="jumpBGoodsManng">
            <img src="@/assets/shopIcon3.png" alt="" class="shopIconImg" />
            <p class="iconText">商品管理</p>
          </div>
          <div class="iconItem" @click="jumpGoodsMenu">
            <img src="@/assets/shopIcon4.png" alt="" class="shopIconImg" />
            <p class="iconText">商品订单</p>
          </div>
          <div class="iconItem" @click="jumpAfterSaleList">
            <img
              src="@/assets/shopIcon5.png"
              alt=""
              class="shopIconImg"
              style="width: 34px"
            />
            <p class="iconText">售后订单</p>
          </div>
        </div>
        <div style="height: 100px"></div>
      </div>
    </div>
    <!-- <tabbar></tabbar> -->
    <div style="height: 100px"></div>
    <div class="tabbarWrap">
      <router-link :to="{ name: 'bIndex' }">
        <div class="tabbarItem">
          <img src="@/assets/tabbar1.1.png" alt="" class="tabbarImg" />
          <p class="tabbarText">商城</p>
        </div>
      </router-link>
      <router-link :to="{ name: 'bShopIndex' }">
        <div class="tabbarItem">
          <img src="@/assets/tabbar4.1.png" alt="" class="tabbarImg" />
          <p class="tabbarText">店铺</p>
        </div>
      </router-link>
      <router-link :to="{ name: 'bPersonalCenter' }">
        <div class="tabbarItem">
          <img src="@/assets/tabbar3.1.png" alt="" class="tabbarImg" />
          <p class="tabbarText">我的</p>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
import { apiPlatformGetUserShopDetails  } from "@/request/api"; // api接口
import tabbar from "../components/tabbarB";
import {ImagePreview} from "vant"
export default {
  name: "App",
  data() {
    return {
      resShopInfo: "", //店铺详情信息
    };
  },
  mounted() {
    this.getShopDetails();
  },
  methods: {
    look(img){ 
    ImagePreview([img])
    },
    //获取店铺详情：
    getShopDetails() {
      apiPlatformGetUserShopDetails({}).then((res) => {
        this.resShopInfo = res.data;
        console.log("店铺详情", this.resShopInfo);
      });
    },
    //续租
    jumpBRelet() {
      this.$router.push({
        path: "/pages/bRelet",
        query: {
          //传递参数
        },
      });
    },
    //购买日推：
    jumpDayRecommend() {
      this.$router.push({
        path: "/pages/bDayRecommend",
        query: {
          //传递参数
        },
      });
    },
    //商品管理：
    jumpBGoodsManng() {
      this.$router.push({
        path: "/pages/bGoodsManng",
        query: {
          //传递参数
        },
      });
    },
    //店铺资料
    jumpShopInfomation() {
      this.$router.push({
        path: "/pages/fillShopInfomation",
        query: {
          //传递参数
          fromId: 0,
        },
      });
    },
    //商品订单：
    jumpGoodsMenu() {
      this.$router.push({
        path: "/pages/bAllOrderList",
        query: {
          //传递参数
        },
      });
    },
    //售后订单
    jumpAfterSaleList() {
      this.$router.push({
        path: "/pages/bAfterSaleList",
        query: {
          //传递参数
          // fromId:0
        },
      });
    },
    //活动管理-(优惠券）
    jumpDsiacountCoupon() {
      this.$router.push({
        path: "/pages/bDsiacountCoupon",
        query: {
          //传递参数
          // fromId:0
        },
      });
    },
  },
  created() {},
  components: {
    tabbar,
    [ImagePreview.Component.name]: ImagePreview.Component,
  },
};
</script>

<style scoped>
.wrap {
  position: relative;
}

.shopBg {
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
}
.productList {
  border-radius: 20px 20px 0px 0px;
  position: absolute;
  top: 220px;
  left: 0px;
  background: #fafbfc;
  width: 100%;
}
.productionItem {
  width: calc(100% - 30px);
  min-height: 130px;
  padding: 15px;
}
.proTitle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.proLeft {
  font-size: 15px;
  font-weight: 500;
  color: #181818;
  width: 65%;
  height: 20px;
  line-height: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.proRight {
  font-size: 10px;
  font-weight: 300;
  color: #666666;
}
.proIntroWrap {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.proIntroLeft {
}
.proPoster {
  width: 25%;
  /* height: 75px; */
  position: absolute;
  border-radius: 15px;
}
.vipImg {
  width: 30px;
  height: 15px;
  position: absolute;
  left: 80px;
}
.proIntroRight {
  width: 65%;
}
.proIntro {
  font-size: 10px;
  font-weight: 400;
  color: #181818;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  text-align: left;
  margin-top: 15px;
}
.salePrice {
  font-size: 9px;
  font-weight: 400;
  color: #ff5252;
  /* padding: 3px 8px; */
  border: 1px solid #ff5252;
  border-radius: 7px;
  /* width: 100px; */
  margin: 10px 0px 5px 0px;
  padding-left: 5px;
  text-align: center;
  padding-bottom: 3px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
em {
  font-style: normal;
}
i {
  display: inline-block;
  width: 1px;
  height: 10px;
  background-color: #ff5252;
  margin: 0px 2px;
}
.workTime {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 400;
  color: #999999;
}
.contactList {
  width: calc(100% - 30px);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.contactItem {
  height: 20px;
  line-height: 20px;
  display: flex;
}
.contactItem img {
  height: 20px;
  align-items: center;
  padding-right: 6px;
}
.contactItem em {
  font-size: 12px;
  font-weight: 500;
  color: #181818;
}
.greyLine {
  width: 100%;
  height: 6px;
  background-color: #f2f4fa;
  margin: 17px 0px;
}
.bottomWrap {
}
.itemRelet {
  width: calc(100% - 30px);
  padding: 15px;
  overflow: hidden;
}
.left {
  float: left;
}
.oneLine {
  color: #666666;
  font-size: 10px;
}
.twoLine {
  color: #181818;
  font-size: 12px;
  margin-top: 5px;
}
.right {
  float: right;
  font-size: 10px;
  font-weight: 300;
  color: #666666;
  margin-top: 12px;
}
.rightGreyArrow {
  width: 5px;
  height: 9px;
  float: right;
  margin-top: 2px;
  margin-left: 5px;
}
.itemRelet2 {
  width: 85%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background: #ffffff;
  border-radius: 20px;
}
.staticItem {
  width: 50%;
  margin-bottom: 14px;
}
.staticItem2 {
  text-align: right;
}
.originPoint {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #f48f5b;
  border-radius: 50%;
}
.staticText {
  font-size: 12px;
  font-weight: 500;
  color: #181818;
}
.shopIconList {
  width: calc(100% - 30px);
  display: flex;
  justify-content: space-between;
  margin: 16px auto;
}
.iconItem {
  text-align: center;
}
.shopIconImg {
  width: 25px;
  height: 28px;
}
.iconText {
  font-size: 12px;
  font-weight: 400;
  color: #181818;
  margin-top: 10px;
}
</style>
